<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			#codeInput {
				float: left;
				width: 37%;
			}
			
			#getCode {
				float: left;
				width: 24% !important;
				height: 40px;
				padding: 10px 0 10px 0 !important;
				margin-right: 10px;
				background-color: #007aff;
				color: #FFFFFF !important;
			}
			
			input:disabled {
				background-color: #AAAAAA !important;
			}
			
			button:disabled {
				background-color: #AAAAAA;
				border-color: #AAAAAA;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #498af7;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">绑定手机号码</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>手机号码</label>
					<input type="number" id="phone" class="mui-input-clear mui-input" placeholder="请输入手机号码" autofocus="autofocus" />
				</div>

				<div class="mui-input-row">
					<label>验证码</label>
					<input type="number" id='codeInput' class="mui-input" placeholder="请输入验证码">
					<input type="button" id="getCode" value="获取验证码" disabled="true" />
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='okButton' type="button" class="mui-btn mui-btn-block mui-btn-primary" disabled="true">确认</button>
			</div>
		</div>
	</body>

	<script src="../../js/mui.min.js"></script>
	<script type="text/javascript">
		//	验证逻辑为:手机号码输入框检测到input事件,则获取验证码按钮可用,且在按钮被点击时验证手机号码格式,
		//			格式正确则发送验证码,同时自身进行倒计时且不可用,并移除手机号码输入框input事件,
		//			避免在倒计时状态下自身可用.之后倒计时结束,按钮可用并为手机号码输入框添加input事件.
		//			验证码输入框检测到input事件,则确定按钮可用.
		//			点击确定按钮,检测手机号码和验证码是否匹配,正确则通过,否则报错.
		//			成功后修改本地存储数据，并触发自定义事件使其他页面读取本地存储并修改原有数据，之后返回。
		mui.init();
		var phone = document.getElementById('phone'),
			codeInput = document.getElementById("codeInput"),
			getCode = document.getElementById("getCode");
		okButton = document.getElementById("okButton");

		phone.addEventListener('input', phoneListener);
		var re = /^1\d{10}$/;
		getCode.addEventListener('tap', function() {
			if(re.test(phone.value)) {
				settime(getCode);
				mui.toast("发送中...");
				phone.removeEventListener('input', phoneListener);
				mui.get('http://app.xiaoweicanting.com/hospital.php?m=App&c=login&a=getTelCode', {
					userid: '4',
					tel: phone.value
				}, function(data) {
					if(data.state === "success") {
						mui.toast(data.msg);
					}
				}, 'json');
			} else {
				mui.alert("请输入有效的手机号");
			}
		})

		codeInput.addEventListener('input', codeInputListener);

		okButton.addEventListener('tap', function() {
			if(re.test(phone.value)) {
				codeInput.removeEventListener('input', codeInputListener);
				okButton.setAttribute("disabled", true)
				mui.ajax('http://app.xiaoweicanting.com/hospital.php?m=App&c=login&a=bendTelCode', {
					data: {
						userid: '4',
						tel: phone.value,
						vcode: codeInput.value
					},
					dataType: 'json',
					type: 'get',
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded' //修改
					},
					success: function(data) {
						if(data.state === "success") {
							mui.toast(data.msg);
							//操作成功后分别修改本地存储,个人信息页面,设置页面,我的页面数据并返回
							resetData('phone', phone.value);
							var pW = plus.webview.getWebviewById("personal_info.html"),
								sW = plus.webview.getWebviewById("setting.html"),
								mW = plus.webview.getWebviewById("my.html");
							mui.fire(pW, 'updateData', {
								target: 'phone'
							});
							mui.fire(sW, 'updateData', {
								target: 'phone'
							});
							mui.fire(mW, 'updateData', {
								target: 'phone'
							});
							mui.back();
						} else if(data.state === 'fail') {
							mui.alert(data.msg);
							okButton.removeAttribute("disabled");
							codeInput.addEventListener('input', codeInputListener);
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						mui.toast('网络异常');
					}
				});
			} else {
				mui.alert("请输入有效的手机号");
			}
		})

		function phoneListener() {
			if(phone.value != "") {
				getCode.removeAttribute("disabled");
			} else {
				getCode.setAttribute("disabled", true)
			}
		}

		function codeInputListener() {
			if(codeInput.value) {
				okButton.removeAttribute("disabled");
			} else {
				okButton.setAttribute("disabled", true);
			}
		}
		var countdown = 60;

		function settime(val) {
			if(countdown == 0) {
				val.removeAttribute("disabled");
				val.value = "获取验证码";
				countdown = 5;
				phone.addEventListener('input', phoneListener);
				return;
			} else {
				val.setAttribute("disabled", true);
				val.value = countdown;
				countdown--;
			}
			setTimeout(function() {
				settime(val)
			}, 1000)
		}

		function resetData(key, newValue) {
			//从storage中取出字符串,将字符串转化为对象,修改后转为字符串存入本地
			var userData = JSON.parse(plus.storage.getItem("userinfo"));
			userData[key] = newValue;
			plus.storage.setItem("userinfo", JSON.stringify(userData));
		}
	</script>

</html>